<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .circle {
        width: 500px;
        height: 500px;
        background-color: red;
        border-radius: 50%;
        margin: 0 auto;
        overflow: hidden;
    }
    .greenPart {
        height: 40%;
        /*子元素宽度与父元素相等*/
        width: inherit;
        background: #0f0;
    }
</style>
<body>
<div class="circle">
    <div class="greenPart"></div>
</div>
<!--思想：需要两个颜色组合，所以需要定义两个div
        两个div为什么是父子关系？因为题目要求百分比分配，且只有父子关系才能将子元素多余部分隐藏。所以需要父子关系才能实现百分比分配
    流程：首先弄一个红色圆形，再用绿色div覆盖。绿色div占父元素高度的40% 遮住红色圆形的上半部分。然后父元素通过overflow:hidden实现超出部分隐藏效果，只留下在红色圆形部分的绿色
-->
</body>
</html>
